<template>
	<view class="container">
		<scroll-view scroll-x class="un-pref-tou">
			<view class="un-pref-tou1">
				<view class="cu-item" :class="0==TabCur?'cur':''"  @tap="tabSelect(0)"> 未使用 </view>
				<view class="cu-item" :class="1==TabCur?'cur':''"  @tap="tabSelect(1)"> 已使用 </view>
				<view class="cu-item" :class="2==TabCur?'cur':''"  @tap="tabSelect(2)"> 已过期 </view>
			</view>
		</scroll-view>
		
		<swiper :current="TabCur" class="swiper-box" :duration="300" @change="changeTab">
			<swiper-item v-for="(itema,indexa) in 3" :key="indexa">
				<scroll-view class="list"  scroll-y >
					<!-- 空白页 -->
					<view v-if="false" style="color: #CCCCCC;text-align: center;width: 100%;height: 500upx;line-height: 500upx;font-size: 32upx;"> 暂无相关的优惠券</view>
										
					<block v-else v-for="(item, index) in prefList" :key="index">
						<view class="un-pref-item"  @click="navToPrefDetail(item.id)">
							<view class="iconfont icon-youhuiquan1 un-pref-icon" :class="{unactive:TabCur===1||TabCur===2}">
								
								<text v-if="item.type===5" class="clamp un-pref-icon-text">{{item.DISCOUNT}}</text>
								<text v-if="item.type===5" class="clamp un-pref-icon-text1">折</text>
								<text v-else class="clamp un-pref-icon-text2">¥{{item.VALUES}}</text>
								<text v-if="item.type!==5" class="un-pref-icon-text3">满{{item.USELIMITMONEY}}元可用</text>
							</view>
							<view class="un-pref-text">
								<view >
									<view class="un-pref-text-t1">
										<text>{{item.TITLE}}</text>
									</view>
									<view class="un-pref-text-t2">
										<text>适用平台 :</text>
										<text>{{item.USESCOPE}}</text>
									</view>
									<view class="un-pref-text-t2">
										<text>有效期至 :</text>
										<text>{{item.VALIDENDTIME}}</text>
									</view>
								</view>
								
								<view v-if="TabCur===0" class="un-pref-text-tt">
									<text class="iconfont icon-youjiantou"></text>
								</view>
							</view>
							<view v-if="item.GETTIME2<86400000 && TabCur===0">
								<text class="iconfont icon-right-label un-pref-icon1"></text>
								<text class="un-pref-icon1-text">新到</text>
							</view>
							<view v-if="item.VALIDENDTIME2<86400000 && item.VALIDENDTIME2>0 && item.GETTIME2>86400000 && TabCur===0">
								<text class="iconfont icon-right-label un-pref-icon2"></text>
								<text class="un-pref-icon2-text">即将过期</text>
							</view>
							<view v-if="TabCur===1">
								<text class="iconfont icon-demo un-pref-icon3"></text>
								<text class="un-pref-icon3-text">已使用</text>
							</view>
							<view v-if="TabCur===2">
								<text class="iconfont icon-demo un-pref-icon3"></text>
								<text class="un-pref-icon3-text">已过期</text>
							</view>
						</view>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { mapState } from 'vuex'; 
	export default {
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		data() {
			return {
				TabCur:0,
				prefList:[
					{id:1,type:1,USESCOPE:"全平台",TITLE:"全品类通用券",VALIDENDTIME:"2019-05-21",VALUES:'10',USELIMITMONEY:'100',DISCOUNT:'',VALIDTIME0:1,VALIDDAY:'',STARTTIME:'2019-07-21',GETTIME:"2019-07-25"},
					{id:2,type:5,USESCOPE:"移动端",TITLE:"全品类通用券",VALIDENDTIME:"",VALUES:'',USELIMITMONEY:'1',DISCOUNT:'8.8',VALIDTIME0:2,VALIDDAY:'5',STARTTIME:'2019-07-21',GETTIME:"2019-07-24"},
				],
			}
		},
		onLoad() {
			this.prefList.map(item=>{
				if(item.VALIDTIME0===2){
					item.VALIDENDTIME1=new Date(new Date(item.STARTTIME).getTime()+item.VALIDDAY*24*60*60*1000);//失效时间毫秒值
					item.VALIDENDTIME=item.VALIDENDTIME1.getFullYear()+'-'+(item.VALIDENDTIME1.getMonth()+1)+'-'+item.VALIDENDTIME1.getDate();//失效时间毫秒值转化为日期格式
				}
				item.VALIDENDTIME2=new Date(item.VALIDENDTIME).getTime()-new Date().getTime();//距离失效日期剩余毫秒值
				item.GETTIME2=new Date().getTime()-new Date(item.GETTIME).getTime();//领取到现在的毫秒值
			})
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//点击标题
			tabSelect(cur){
				this.TabCur=cur;
			},
			//swiper 切换
			changeTab(e){
				this.TabCur = e.target.current;
			},
			//跳转商品详情
			navToPrefDetail(prefId){
				uni.navigateTo({
					url:`/pages/pref/prefDetail/prefDetail?prefId=`+prefId
				})
			},
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/pref/prefHelp/prefHelp'
			})
		}
	}
</script>

<style lang="scss">
	page,.container{
		background-color: #f5f5f5;
		height: 100%;
		
		.swiper-box {
			flex: 1;
			width: 100%;
			height: calc(100% - 100upx);
			// height: 100%;
			.list{
				height: 100%;
				width: 100%;
				border-top: 1upx solid #F2F2F2;
				padding: 0upx 20upx;
			}
		}
	}
	
	.un-pref-tou{
		white-space: nowrap;
		background-color: #ffffff;
		.un-pref-tou1{
			display: flex;
			text-align: center;
			height: 70upx;
			.cu-item {
				height: 70upx;
				display: inline-block;
				line-height: 70upx;
				margin: 0 10upx;
				padding: 0 20upx;
				flex: 1;
				font-size: 25upx;
			}
			.cur{
				color: #E02E24;
				position: relative;
			}
			.cur::after {
				content: "";
				position: absolute;
				width: 140upx;
				height: 4upx;
				bottom:0 ;
				left: 20%;
				background-color: #E02E24;
			}
		}
	}
	.un-pref-item{
		background-color: #ffffff;
		display: flex;
		position: relative;
		margin-top: 20upx;
		.un-pref-icon{
			color: #E02E24;
			font-size: 220upx;
			.un-pref-icon-text{
				position: absolute;
				z-index:1;
				color: #ffffff;
				font-size: 70upx;
				font-weight: 900;
				left: 45upx;
				top: 70upx;
			}
			.un-pref-icon-text1{
				position: absolute;
				z-index:1;
				color: #ffffff;
				font-size: 28upx;
				font-weight: 900;
				left: 155upx;
				top: 110upx;
			}
			.un-pref-icon-text2{
				position: absolute;
				z-index:1;
				color: #ffffff;
				font-size: 70upx;
				font-weight: 900;
				left: 45upx;
				top: 40upx;
			}
			.un-pref-icon-text3{
				position: absolute;
				z-index:1;
				color: #ffffff;
				font-size: 25upx;
				left: 40upx;
				top: 130upx;
			}
		}
		.unactive{
			color: #CCCCCC;
		}
		.un-pref-text{
			display: flex;
			padding: 30upx 40upx;
			.un-pref-text-t1{
				font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
				font-weight: 700;
				color: #999999;
				font-size: 28upx;
				line-height: 70upx;
			}
			.un-pref-text-t2{
				color: #CCCCCC;
				font-weight: 400;
				font-size: 25upx;
				line-height: 50upx;
			}
			.un-pref-text-tt{
				position: absolute;
				z-index: 1;
				left: 650upx;
				top:80upx;
				color: #CCCCCC;
			}
		}
		.un-pref-icon1{
			position: absolute;
			z-index: 1;
			right: 0upx;
			color: #F19736;
			font-size: 100upx;
		}
		.un-pref-icon1-text{
			position: absolute;
			z-index: 2;
			left: 650upx;
			top: 25upx;
			color: #FFFFFF;
			font-size: 25upx;
			transform: rotate(45deg);
		}
		.un-pref-icon2{
			position: absolute;
			z-index: 1;
			right: 0upx;
			color: #F04844;
			font-size: 120upx;
		}
		.un-pref-icon2-text{
			position: absolute;
			z-index: 2;
			left: 615upx;
			top: 35upx;
			color: #FFFFFF;
			font-size: 25upx;
			transform: rotate(46deg);
		}
		.un-pref-icon3{
			position: absolute;
			z-index: 1;
			left: 520upx;
			top: 70upx;
			color: #CCCCCC;
			font-size: 120upx;
		}
		.un-pref-icon3-text{
			position: absolute;
			z-index: 2;
			left: 545upx;
			top: 118upx;
			color: #CCCCCC;
			font-size: 25upx;
			transform: rotate(-20deg);
		}
	}
</style>
